<template>
  <div
    class="recognition"
    v-loading="loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
  >
    <div style="text-align:center">
      <!-- 卡片视图 -->
      <el-card>
        <el-upload
          class="avatar-uploader"
          action="http://39.106.31.187:8888/PersonRecognition/person"
          :show-file-list="true"
          list-type="picture-card"
          :before-upload="handleBeforeUpload"
          :on-success="handleUploadSuccess"
          :on-error="handleUploadError"
        >
          <i class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        <!-- <div style="text-align:center"> -->
        <center>
          <!-- {{ response }} -->
          <el-table :data="response.person_info">
            <el-table-column
              label="人体朝向"
              prop="attributes.orientation.name"
              align="center"
            ></el-table-column>
            <el-table-column
              label="性别"
              prop="attributes.gender.name"
              align="center"
            ></el-table-column>
            <el-table-column
              label="年龄阶段"
              prop="attributes.age.name"
              align="center"
            ></el-table-column>
            <el-table-column
              label="是否吸烟"
              prop="attributes.smoke.name"
              align="center"
            ></el-table-column>
            <el-table-column
              label="是否戴口罩"
              prop="attributes.face_mask.name"
              align="center"
            ></el-table-column>
            <el-table-column
              label="是否为正常人体"
              prop="attributes.is_human.name"
              align="center"
            ></el-table-column>
          </el-table>
        </center>

        <!-- </div> -->
      </el-card>
    </div>
    <!-- 图形 -->

      <div id="container" style="min-width:400px;height:400px"></div>

  </div>
</template>

<script>
export default {
  data() {
    return {
      response: {},
      loading: false,
    };
  },
  //部件
  components: {},
  //静态
  props: {
  },
  //对象内部的属性监听，也叫深度监听
  watch: {},
  //属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用；
  computed: {},
  //方法表示一个具体的操作，主要书写业务逻辑；
  methods: {
    handleUploadSuccess(resp) {
      this.response = resp;
       this.initChart();
      // this.progressNum = this.response.result[1][1];
      //console.log(resp.result[1]);
      this.loading = false;
    },
    handleBeforeUpload() {
      //开始loading
      this.loading = true;
    },
    handleUploadError() {
      this.loading = false;
    },
    // 初始化图形
    initChart() {
      Highcharts.chart("container", {
        chart: {
          plotBackgroundColor: null,
          plotBorderWidth: null,
          plotShadow: false,
          type: "pie"
        },
        title: {
          text: "数据分析"
        },
        tooltip: {
          pointFormat: "{series.name}: <b>{point.percentage:.1f}%</b>"
        },
        plotOptions: {
          pie: {
            allowPointSelect: true,
            cursor: "pointer",
            dataLabels: {
              enabled: false
            },
            showInLegend: true
          }
        },
        series: [
          {
            name: "Brands",
            colorByPoint: true,
            data: [
              {
                name: "orientation",
                y: 61.41,
                // y:qq,
                sliced: true,
                selected: true
              },
              {
                name: "gender",
                y: 11.84
                // y:ww
              },
              {
                name: "age",
                // y:ee,
                y: 10.85
              },
              {
                name: "smoke",
                // y:rr
                y: 4.67
              },
              {
                name: "face_mask",
                y: 4.18
                // y:tt
              },
              {
                name: "is_human",
                // y:yy
                y: 7.05
              }
            ]
          }
        ]
      });
    }
  },
  //请求数据
  created() {},
  mounted() {
    
  }
};
</script>

<style scoped></style>
